<template>
	<view class="recommend">
		<image class="recommend-bg" src="https://daiyue.gzzhenyi.net/static/image/user/recommendBg.jpg" />
		<view class="commission-head">
			<van-icon class="back-left" name="arrow-left" @click="back" />
			<view class="commission-title">推广</view>
		</view>


		<view class="commission-content">
			<image class="commission-bg" src="https://daiyue.gzzhenyi.net/uploads/20241108/dab35ea1cee47f96a28f05285136c92a.png" mode="scaleToFill" />
            <view class="user-info">
                <image class="user-img" :src="user.avatar" style="width: 120rpx;height: 120rpx;border-radius: 50%;" mode="aspectFill"></image>
                <view class="user-right">
                    <view class="user-right-flex">
                        <view class="user-right-name">{{user.nickname}}</view>
                        <view class="user-right-vip">{{user.group_id?'VIP':'普通'}}会员</view>
                    </view>
					<view class="user-right-flex">
					    <view class="user-right-text">我的专属邀请码</view>
					</view>
                </view>
            </view>
            <view class="user-code">
                <image class="user-code-img" :src="baseUrl+user.invite_qrcode" />
            </view>
			<!-- <image class="commission-bg" :src="path" mode="widthFix"></image> -->
			<l-painter ref="painter" :board="poster" isCanvasToTempFilePath @success="path = $event" hidden />
		</view>

		<view class="commission-footer">
			<view class="footer-button" @tap="base64ToUrl(path, 1)">保存相册</view>
			<view class="footer-buttons" @tap="base64ToUrl(path, 0)">发给好友</view>
		</view>
		<canvas style="width: 578upx; height: 879upx; visibility: hidden;" canvas-id="posterCanvas"
			id="posterCanvas"></canvas>

	</view>

</template>

<script>
	import { getUserInfo } from "../../api/api";
import baseUrl from "../../api/baseUrl";
import {
		base64ToUrl
	} from "@/util/util.js"
	export default {
		data() {
			return {
				path: ' ',
				nickName: '萱萱',
				poster: {
					css: {
						width: "578rpx",
						paddingBottom: "40rpx",
						borderRadius: '20rpx',

					},
					views: [{
							// src: "https://img.yzcdn.cn/vant/cat.jpeg",
							src: 'https://daiyue.gzzhenyi.net/static/image/user/reBg.png',
							type: "image",
							css: {
								width: '578rpx',
								height: '879rpx',
								borderRadius: '20rpx',
								marginBottom: '20rpx',
								objectFit: 'cover'
							}
						},
						{
							type: "view",
							css: {
								display: 'flex',
								alignItems: 'center',
								position: 'absolute',
								transform: 'translate(20%, 30%)'
							},
							views: [{
									type: "image",
									src: 'https://daiyue.gzzhenyi.net/static/image/user/auhtor@4x.png',
									css: {
										width: '145rpx',
										height: '145rpx',
										borderRadius: '50%',
										marginRight: '20rpx'
									}
								},
								{
									type: "text",
									text: '萱萱',
									css: {
										fontSize: '30rpx',
										color: '#333333'
									}
								},
								{
									type: "image",
									src: "https://daiyue.gzzhenyi.net/static/image/user/vip.png",
									css: {
										width: '90rpx',
										height: '30rpx',
										marginLeft: '10rpx'
									}
								}

							]
						},
						{
							type: "view",
							css: {
								position: 'absolute',
								transform: 'translate(35%, 105%)',
								zIndex: '1'
							},
							views: [{
								type: "image",
								src: 'https://daiyue.gzzhenyi.net/static/image/user/WeChate.jpg',
								css: {
									width: '340rpx',
									height: '340rpx'
								}
							}]
						}
					]
				},
				user:{},
				baseUrl:''
			}
		},
		onLoad() {
			this.baseUrl = baseUrl
			getUserInfo().then(res=>{
				this.user = res.data;
			})
		},
		methods: {
			base64ToUrl,
			back() {
				uni.navigateBack({
					delta: 1
				})
			}
		}
	}
</script>
<style scoped lang="scss">
	.recommend {
		position: relative;
		width: 100vh;
		height: 100vh;
		background: #fff;
	}

	.recommend-bg {
		position: absolute;
		top: 0;
		right: 0;
		left: 0;
		width: 765rpx;
		height: 1000rpx;
		z-index: 0;
	}

	.commission-head {
		display: flex;
		align-items: center;
		width: 100%;
		padding-top: 120upx;
		position: relative;

		.back-left {
			color: #333333;
			font-size: 40upx;
			position: absolute;
			left: 40upx;
		}

		.commission-title {
			font-size: 30upx;
			color: #333333;
			text-align: center;
			font-weight: normal;
			flex: 1;
			position: absolute;
			transform: translate(555%, 10%);
		}
	}

	.commission-content {
		position: relative;
		margin-top: 200upx;


		.commission-bg {
			width: 578upx;
			height: 879upx;
			position: absolute;
			transform: translate(16%, -1%);

		}
	}

	.user-info {
		display: flex;
		align-items: center;
		position: absolute;
		transform: translate(44%, 26%);
	}

	.user-img {
		width: 145upx;
		height: 145upx;
		border-radius: 50%;
		margin-right: 20upx;
	}

	.user-right-flex {
		display: flex;
		align-items: center;

		.user-right-name {
			font-size: 30upx;
			color: #333333;
		}
		.user-right-text{
			color: #A2A2A2;
			font-size: 24rpx;
		}



	}

	.user-right-vip {
		font-size: 18upx;
		color: #333333;
		margin-left: 20upx;
		border-radius: 6px 6px 100upx 6px;
		background: linear-gradient(103deg, #F69700 -8%, #EB5E00 100%);
		color: #FFFFFF;
		font-weight: normal;
		padding: 5upx 10upx;
	}

	.user-right-code {
		font-size: 24upx;
		color: #A2A2A2;
	}

	.user-code {
		position: absolute;
		transform: translate(33%, 60%);
		width: 460upx;

		.user-code-img {
			width: 340upx;
			height: 340upx;
			margin: 65upx auto;
			display: flex;
		}

		.user-code-text {
			font-size: 32upx;
			color: #A2A2A2;
			text-align: center;
			width: 460upx;
		}
	}

	.commission-footer {
		display: flex;
		justify-content: space-evenly;
		align-items: center;
		position: absolute;
		transform: translate(10%, 1095%);


		.footer-button {
			padding: 20upx 90upx;
			border-radius: 50upx;
			color: #359BEF;
			border: 1px solid #359BEF;
			font-size: 30upx;
			margin-right: 30upx;
		}

		.footer-buttons {
			padding: 20upx 90upx;
			border-radius: 50upx;
			color: #FFFFFF;
			background-color: #359BEF;
			font-size: 30upx;
		}
	}
</style>